<template>
	<view>
		<block v-if="type">
			<view class="lc-title">发布招聘</view>
			<view class="lc-head">
				<view class="lc-num-left">1</view>
				<view class="lc-border"></view>
				<view class="lc-num-right">2</view>
			</view>
			<view class="lc-tname">
				<view class="lc-name">填写基本信息</view>
				<view class="lc-name" style="color: #D8D8D8;">选择职位要求</view>
			</view>
			<view class="lc-type">招聘类型</view>
			<view class="lc-anniu">
				<view :class="state==1?'lc-state':''" @click="tab(1)">社招全职</view>
				<view :class="state==2?'lc-state':''" @click="tab(2)">兼职招聘</view>
			</view>
			<view class="lc-more">
				<view>招聘标题</view>
				<input type="text" placeholder="请填招聘标题" placeholder-class="mo" v-model="title" />
			</view>
			<view class="lc-more">
				<view>职位详情</view>
				<textarea placeholder="介绍工作内容、职位要求" placeholder-class="mo" v-model="introduction"></textarea>
			</view>
			<view class="lc-foot">
				<view @click="next">下一步</view>
			</view>
		</block>
		<block v-else>
			<view class="lc-title">继续填写</view>
			<view class="lc-head">
				<view class="lc-num-left">1</view>
				<view :class="type?'lc-border':'two-bgcolor'"></view>
				<view class="lc-num-right" style="background-color: #84BD00;">2</view>
			</view>
			<view class="lc-tname" style="padding-bottom: 40rpx;">
				<view class="lc-name">填写基本信息</view>
				<view class="lc-name">选择职位要求</view>
			</view>
			<view class="lc-list">
				<view class="lc-list-name">公司人数</view>
				<!-- <input type="text" placeholder="请输入经验需求" placeholder-class="mo" v-model="jingyan" /> -->
				<view class="lc-list-box" @click="showgs">
					<view v-if="gsname">{{gsname}}</view>
					<view v-else class="mo">请选择公司人数</view>
					<image src="/static/next.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lc-list">
				<view class="lc-list-name">经验需求</view>
				<!-- <input type="text" placeholder="请输入经验需求" placeholder-class="mo" v-model="jingyan" /> -->
				<view class="lc-list-box" @click="showjy">
					<view v-if="jyname">{{jyname}}</view>
					<view v-else class="mo">请选择学历要求</view>
					<image src="/static/next.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lc-list">
				<view class="lc-list-name">学历</view>
				<view class="lc-list-box" @click="showxl">
					<view v-if="xlname">{{xlname}}</view>
					<view v-else class="mo">请选择学历要求</view>
					<image src="/static/next.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lc-list">
				<view class="lc-list-name">薪资范围</view>
				<view class="lc-list-box" @click="showMoney">
					<view v-if="money">{{money}}</view>
					<view v-else class="mo">请选择薪资范围</view>
					<image src="/static/next.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lc-list">
				<view class="lc-list-name">职位</view>
				<view class="lc-list-box" @click="showJob">
					<view v-if="job">{{job}}</view>
					<view v-else class="mo">请选择职位</view>
					<image src="/static/next.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lc-more">
				<view>职位关键词</view>
				<input type="text" placeholder="请输入职位关键词并用英文逗号(,)分开" placeholder-class="mo" v-model="label" />
			</view>
			<view class="lc-list">
				<view class="lc-list-name">工作城市</view>
				<picker mode="region" :range="city" @change="selectCity">
					<view class="lc-list-box">
						<view v-if="city[0]">{{city[0]}} {{city[1]}} {{city[2]}}</view>
						<view v-else class="mo">请选择工作城市</view>
						<image src="/static/next.png" mode="widthFix"></image>
					</view>
				</picker>
			</view>
			<view class="lc-list">
				<view>工作地点</view>
				<view class="lc-list-box" @click="selectAddress">
					<view v-if="address">{{address}}</view>
					<view v-else class="mo">请选择工作地点</view>
					<image src="/static/next.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lc-more">
				<view>楼层/单元室/门牌号</view>
				<input type="text" placeholder="请输入楼层/单元室/门牌号" placeholder-class="mo" v-model="ress_detail" />
			</view>
			<view class="lc-more">
				<view>招聘人数</view>
				<input type="text" placeholder="请输入招聘人数" placeholder-class="mo" v-model="people_num" />
			</view>
			<view class="lc-more">
				<view>发薪日期</view>
				<input type="text" placeholder="请输入发薪日期" placeholder-class="mo" v-model="price_day" />
			</view>
			<view class="lc-more">
				<view>奖金补贴</view>
				<input type="text" placeholder="请输入奖金补贴" placeholder-class="mo" v-model="price_add" />
			</view>
			<view class="lc-big"></view>
			<view class="lc-foot-two">
				<view @click="up">上一步</view>
				<view @click="releaseSuccess">修改</view>
			</view>
		</block>
		<view class="lc-show" v-if="typeMoney">
			<view class="lc-three">
				<view class="lc-r-title">期望薪资</view>
				<view class="lc-r-list">
					<view :class="moneyId==item.id?'lc-r-name':''" v-for="(item,index) in priceList"
						@click="selectMoney(item)">
						{{item.price_text}}
					</view>
				</view>
			</view>
			<view class="lc-foots">
				<view class="lc-ln" @click="moneyOl">关闭</view>
				<view class="lc-rn" @click="moneyOl">确定</view>
			</view>
		</view>
		<view class="lc-show" v-if="typeJob">
			<view class="lc-three">
				<block v-for="(item,index) in jobList">
					<view class="lc-r-title">{{item.name}}</view>
					<view class="lc-r-list">
						<view :class="jobId==con.id?'lc-r-name':''" v-for="(con,num) in item.work_type_two"
							@click="selectJob(con)">
							{{con.name}}
						</view>
					</view>
				</block>
			</view>
			<view class="lc-foots">
				<view class="lc-ln" @click="jobOl">关闭</view>
				<view class="lc-rn" @click="jobOl">确定</view>
			</view>
		</view>
		<view class="lc-show" v-if="typexl">
			<view class="lc-three">
				<view class="lc-r-title">学历要求</view>
				<view class="lc-r-list">
					<view :class="xlid==item.id?'lc-r-name':''" v-for="(item,index) in xlList" @click="selectxl(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="lc-foots">
				<view class="lc-ln" @click="xlOl">关闭</view>
				<view class="lc-rn" @click="xlOl">确定</view>
			</view>
		</view>
		<view class="lc-show" v-if="typejy">
			<view class="lc-three">
				<view class="lc-r-title">经验要求</view>
				<view class="lc-r-list">
					<view :class="jyid==item.id?'lc-r-name':''" v-for="(item,index) in jyList" @click="selectjy(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="lc-foots">
				<view class="lc-ln" @click="jyOl">关闭</view>
				<view class="lc-rn" @click="jyOl">确定</view>
			</view>
		</view>
		<view class="lc-show" v-if="typegs">
			<view class="lc-three">
				<view class="lc-r-title">公司人数</view>
				<view class="lc-r-list">
					<view :class="gsid==item.id?'lc-r-name':''" v-for="(item,index) in gsList" @click="selectgs(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="lc-foots">
				<view class="lc-ln" @click="gsOl">关闭</view>
				<view class="lc-rn" @click="gsOl">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 1,
				type: true,
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				city: ['', '', ''],
				typeMoney: false,
				typeJob: false,
				priceList: [],
				moneyId: 0,
				money: '',
				jobList: [],
				jobId: 0,
				job: '',
				title: '',
				introduction: '',
				education: '',
				address: '',
				ress_detail: '',
				jingyan: '',
				people_num: '',
				price_day: '',
				lat: '',
				lng: '',
				price_add: '',
				label: '',
				id: '',
				jyList: [],
				gsList: [],
				xlList: [],
				xlid: '',
				xlname: '',
				typexl: false,
				jyid: '',
				jyname: '',
				typejy: false,
				gsid: '',
				gsname: '',
				typegs: false
			}
		},
		onLoad(e) {
			this.id = e.id
			this.app.post('/api/wanlshop/user/workcat').then(res => {
				console.log(res)
				this.priceList = res.WorkPrice_list
				this.jobList = res.WorkType_list
				this.jyList = res.Workjingyan_list
				this.gsList = res.Workgongsi_list
				this.xlList = res.Workxueli_list
			})
			this.app.post('/api/wanlshop/user/workdetail', {
				id: e.id
			}).then(res => {
				console.log(res)
				this.state = res.info.type
				this.title = res.info.title
				this.introduction = res.info.introduction
				this.jingyan = res.info.jingyan
				this.education = res.info.education
				this.moneyId = res.info.price_id
				this.money = res.info.price_text
				this.jobId = res.info.work_type_id
				this.job = res.info.work_type_text
				this.label = res.info.label
				this.city = res.info.city.split(',')
				this.address = res.info.ress
				this.ress_detail = res.info.ress_detail
				this.people_num = res.info.people_num
				this.price_add = res.info.price_add
				this.price_day = res.info.price_day

				this.xlid = res.info.education
				this.xlname = res.info.xueli_name

				this.jyid = res.info.jingyan
				this.jyname = res.info.jingyan_name

				this.gsid = res.info.gsid
				this.gsname = res.info.gsid_name
			})
		},
		methods: {
			selectMoney(item) {
				console.log(item)
				this.moneyId = item.id
				this.money = item.price_text
			},
			selectJob(item) {
				this.jobId = item.id
				this.job = item.name
			},
			selectxl(item) {
				this.xlid = item.id
				this.xlname = item.name
			},
			selectjy(item) {
				this.jyid = item.id
				this.jyname = item.name
			},
			selectgs(item) {
				this.gsid = item.id
				this.gsname = item.name
			},
			xlOl() {
				this.typexl = false
			},
			gsOl() {
				this.typegs = false
			},
			jyOl() {
				this.typejy = false
			},
			showxl() {
				this.typexl = true
			},
			showjy() {
				this.typejy = true
			},
			showgs() {
				this.typegs = true
			},
			moneyOl() {
				this.typeMoney = false
			},
			jobOl() {
				this.typeJob = false
			},
			showMoney() {
				this.typeMoney = true
			},
			showJob() {
				this.typeJob = true
			},
			selectCity(e) {
				this.city = e.detail.value
			},
			selectAddress() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.lat = res.latitude
						this.lng = res.longitude
						this.address = res.address
					}
				});
			},
			tab(state) {
				this.state = state
			},
			next() {
				this.type = false
			},
			up() {
				this.type = true
			},
			releaseSuccess() {
				this.app.post('/api/wanlshop/user/workshopadd', {
					work_type_id: this.jobId,
					price_id: this.moneyId,
					title: this.title,
					education: this.xlid,
					jingyan: this.jyid,
					gsid: this.gsid,
					introduction: this.introduction,
					ress: this.address,
					ress_detail: this.ress_detail,
					people_num: this.people_num,
					price_day: this.price_day,
					type: this.state,
					label: this.label,
					longitude: this.lng,
					latitude: this.lat,
					price_add: this.price_add,
					work_id: this.id,
					city: this.city.join(','),
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '修改成功',
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
				return
				uni.navigateTo({
					url: '/pages/lc/releaseSuccess/releaseSuccess'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.lc-title {
		margin-left: 30rpx;
		font-size: 40rpx;
		color: #333333;
		margin-top: 30rpx;
	}

	.lc-head {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;

		.lc-num-left {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			font-size: 26rpx;
			color: #FFFFFF;
			background-color: #84BD00;
		}

		.lc-num-right {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			font-size: 26rpx;
			color: #FFFFFF;
			background-color: #E7F6C3;
		}

		.lc-border {
			width: 468rpx;
			height: 8rpx;
			background: linear-gradient(270deg, #E7F6C3 0%, #84BD00 100%);
		}

		.two-bgcolor {
			width: 468rpx;
			height: 8rpx;
			background-color: #84BD00;
		}
	}

	.lc-tname {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;

		.lc-name {
			font-size: 30rpx;
			color: #333333;
		}
	}

	.lc-type {
		margin-left: 30rpx;
		margin-top: 50rpx;
	}

	.lc-anniu {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		padding-bottom: 40rpx;

		view {
			width: 308rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F6F6F6;
			border-radius: 16rpx;
		}

		.lc-state {
			background-color: #E7F6C3;
			color: #84BD00;
		}
	}

	.lc-list {
		width: 690rpx;
		margin-left: 30rpx;
		border-bottom: 1px solid #eee;
		padding: 40rpx 0;

		.lc-list-name {
			font-size: 33rpx;
			color: #3D3D3D;
		}

		.lc-list-box {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			view {
				font-size: 30rpx;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.mo {
				color: #D8D8D8;
			}
		}
	}

	.lc-more {
		width: 690rpx;
		margin-left: 30rpx;
		border-bottom: 1px solid #eee;
		padding: 40rpx 0;

		view {
			font-size: 33rpx;
			color: #3D3D3D;
		}

		input {
			width: 690rpx;
			margin-top: 30rpx;
			font-size: 30rpx;
		}

		textarea {
			width: 690rpx;
			margin-top: 30rpx;
			font-size: 30rpx;
		}

		.mo {
			color: #D8D8D8;
		}
	}

	.lc-foot {
		width: 750rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0;

		view {
			width: 690rpx;
			height: 82rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #FFFFFF;
			background-color: #84BD00;
		}
	}

	.lc-foot-two {
		width: 750rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0;
		z-index: 969;

		view {
			width: 330rpx;
			height: 82rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #FFFFFF;
			background-color: #84BD00;
			margin-right: 30rpx;
			margin-left: 30rpx;
		}
	}

	.lc-show {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #F6F6F6;
		z-index: 9669999;
		display: flex;

		.lc-three {
			width: 690rpx;
			margin-left: 30rpx;

			.lc-r-title {
				font-size: 34rpx;
				color: #333333;
				padding-top: 40rpx;
			}

			.lc-r-list {
				width: 690rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				view {
					width: 200rpx;
					margin-top: 30rpx;
					background-color: #FFFFFF;
					text-align: center;
					line-height: 90rpx;
					border-radius: 16rpx;
				}

				.lc-r-name {
					background-color: #84BD00;
					color: #fff;
				}
			}
		}

		.lc-left {
			width: 180rpx;
			height: 100vh;
			background-color: #FFFFFF;

			.lc-left-name {
				width: 180rpx;
				line-height: 90rpx;
				font-size: 26rpx;
				color: #3D3D3D;
				text-align: center;
			}

			.bgcolor {
				background-color: #F6F6F6;
			}
		}

		.lc-right {
			width: 570rpx;
			height: 100vh;

			.lc-r-title {
				font-size: 34rpx;
				color: #333333;
				padding-top: 40rpx;
				margin-left: 30rpx;
			}

			.lc-r-list {
				width: 510rpx;
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				view {
					width: 240rpx;
					margin-top: 30rpx;
					background-color: #FFFFFF;
					text-align: center;
					line-height: 90rpx;
					border-radius: 16rpx;
				}

				.lc-r-name {
					background-color: #84BD00;
					color: #fff;
				}
			}

			.lc-mores {
				width: 510rpx;
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90rpx;

				view {
					font-size: 26rpx;
					color: #3D3D3D;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.lc-foots {
			background-color: #FFFFFF;
			width: 750rpx;
			height: 120rpx;
			box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
			position: fixed;
			bottom: 0;
			z-index: 99999;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.lc-ln {
				width: 336rpx;
				height: 82rpx;
				border: 1px solid #84BD00;
				color: #84BD00;
				border-radius: 50rpx;
				box-sizing: border-box;
				margin-left: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.lc-rn {
				width: 336rpx;
				height: 82rpx;
				border: 1px solid #84BD00;
				color: #FFFFFF;
				background-color: #84BD00;
				border-radius: 50rpx;
				box-sizing: border-box;
				margin-right: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>